<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>意见反馈</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/base.css" />
    <style>
        html,
        body {
            background: #F6F6F6;
            height: 100%;
            width: 100%;
            margin: 0;
            overflow: hidden
        }

        .has-tit {
            font-size: 1.4rem;
            padding-bottom: 0.3rem;
        }

        .container {
            padding-right: 0px;
            padding-left: 0px;
        }

        .container .s {
            background: #fff;
            margin-bottom: 0.5rem;
            padding: 0.5rem 1rem;
        }

        input {
            border: 0;
            font-size: 0.5rem;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .textarea {
            box-sizing: border-box;
            width: 100%;
            height: auto;
            padding: 5px;
            border: 1px solid #ccc;
        }

        .textarea:empty:before {
            content: attr(placeholder);
            color: #bbb;
        }

        .textarea:focus:before {
            content: none;
        }

        textarea {
            overflow: auto;
            width: 100%;
            border: 0;
            resize: none;
            font-size: 0.5rem;
        }

        .button {
            display: flex;
            justify-content: center;
            margin-top: 1rem;
        }

        .button .submit {
            background: #169bd4;
            border-radius: 5px;
            padding: 0.5rem 7rem;
            color: #fff;
            font-size: 1rem
        }
    </style>
</head>

<body>
    <div class="container">
        <form role="form">
            <div class="company s">
                <p class="has-tit">单位名称</p>
                <input type="text" name="company" value="" placeholder="未来大学">
            </div>
            <div class="name s">
                <p class="has-tit">反馈人</p>
                <input type="text" name="name" value="" placeholder="请输入反馈人姓名">
            </div>
            <div class="type s">
                <p class="has-tit">反馈类型</p>
                <div class="row">
                    <label class="col-xs-4"><input name="type" type="radio" value="双选会" />双选会 </label>
                    <label class="col-xs-4"><input name="type" type="radio" value="宣讲会" />宣讲会</label>
                    <label class="col-xs-4"><input name="type" type="radio" value="在线招聘" />在线招聘 </label>
                    <label class="col-xs-4"><input name="type" type="radio" value="职位管理" />职位管理 </label>
                    <label class="col-xs-4"><input name="type" type="radio" value="公司信息" />公司信息 </label>
                    <label class="col-xs-4"><input name="type" type="radio" value="数据丢失" />数据丢失</label>
                    <label class="col-xs-4"><input name="type" type="radio" value="注册登录" />注册登录 </label>
                    <label class="col-xs-4"><input name="type" type="radio" value="入住学校" />入住学校 </label>
                    <label class="col-xs-4"><input name="type" type="radio" value="建议" />建议</label>
                    <label class="col-xs-4"><input name="type" type="radio" value="其他" />其他</label>
                </div>
            </div>
            <div class="problem s">
                <p class="has-tit">问题描述</p>
                <textarea id="problem" name="problem" rows="3" value="" placeholder="手机号/微信号/QQ号/邮箱"></textarea>
                <p style="text-align: right;font-size: 0.5rem;color: #aaa;"><span id="surplus">0</span>/200字</p>
            </div>
            <div class="contact s">
                <p class="has-tit">联系方式<span style="font-size: 0.5rem;
                color: #aaa;">(方便与您联系，排查问题)</span></p>
                <input style="width: 100%;" type="text" name="contact" value="" placeholder="手机号/微信号/QQ号/邮箱">
            </div>
            <div class="photo s">
                <p class="has-tit">截图上传</p>
                <div id="cupload-update"></div>
            </div>
            <div class="button">
                <input class="submit" id="submit" value="提交反馈">
            </div>
        </form>
    </div>


</body>
<script src="./js/cupload.js"></script>
<script>
    $('#submit').click(function () {
        var data = {};
        var formitems = $('form [name]');
        formitems.each(function () {
            if (this.type === 'radio') { // 是单选按钮
                if (this.checked) { // 且选中，再赋值
                    data[this.name] = this.value
                }
            } else { // 不是直接赋值
                data[this.name] = this.value
            }
        })
        console.log('data: ', data);
    })
    $(function () {
        $("#problem").keyup(function () {
            var len = $(this).val().length;
            if (len > 199) {
                $(this).val($(this).val().substring(0, 199));
            }
            $("#surplus").text(len);
            this.value = $(this).val()
            console.log('this.value: ', this.value);
        });
    });
    var cuploadUpdate = new Cupload({
        ele: '#cupload-update',
        num: 3,
    });
</script>

</html>